<template>
	<div id="app">

		<transition :name="transitionName">
			<router-view key="view" class="view" />
		</transition>

		<!-- 底部菜单 -->
		<transition name="tabbar-fold">
			<van-tabbar v-if="$route.meta.is_tabBar" route v-model="active" active-color="#94E9FF" inactive-color="#3A627E"
			 :border="false">
				<van-tabbar-item replace to="/">
					<span>首页</span>
					<template #icon="props">
						<img v-if="props.active" src="./assets/tabbar/home-active.png" alt="">
						<img v-else src="./assets/tabbar/home.png" alt="">
					</template>
				</van-tabbar-item>
				<van-tabbar-item replace to="/robot">
					<span>矿机中心</span>
					<template #icon="props">
						<img v-if="props.active" src="./assets/tabbar/robot-active.png" alt="">
						<img v-else src="./assets/tabbar/robot.png" alt="">
					</template>
				</van-tabbar-item>
				<!-- <van-tabbar-item replace to="/shopping">
					<span>商城</span>
					<template #icon="props">
						<img v-if="props.active" src="./assets/tabbar/shopping-active.png" alt="">
						<img v-else src="./assets/tabbar/shopping.png" alt="">
					</template>
				</van-tabbar-item> -->
				<van-tabbar-item replace to="/pets">
					<span>宠物</span>
					<template #icon="props">
						<img v-if="props.active" src="./assets/tabbar/pets-active.png" alt="">
						<img v-else src="./assets/tabbar/pets.png" alt="">
					</template>
				</van-tabbar-item>
				<van-tabbar-item replace to="/user">
					<span>我的</span>
					<template #icon="props">
						<img v-if="props.active" src="./assets/tabbar/user-active.png" alt="">
						<img v-else src="./assets/tabbar/user.png" alt="">
					</template>
				</van-tabbar-item>
			</van-tabbar>
		</transition>

	</div>
</template>

<script>
	// @ is an alias to /src
	import Vue from 'vue';
	import {
		Tabbar,
		TabbarItem
	} from 'vant';

	Vue.use(Tabbar);
	Vue.use(TabbarItem)

	export default {
		data() {
			return {
				//底部菜单下标
				active: 0,

				//动画效果 name 名
				transitionName: 'fold-left'

			}
		},
		watch: {
			//跳转平滑衔接 监听路由变化
			'$route'(to, from) {
				const routeDeep = ['/', '/robot', '/shopping', '/pets', '/user', '/setUp', '/robotShopping', '/authentication',
					'/collectionManagement', '/security', '/security', '/changePassword', '/invitation', '/myTeam', '/promotion',
					'/transaction', '/orderDetails', '/myKuangji', '/petsOrder', '/petsRecord', '/kefu'
				];
				const toDepth = routeDeep.indexOf(to.path)
				const fromDepth = routeDeep.indexOf(from.path)
				this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'
				this.$store.state.transition = toDepth > fromDepth ? 'fold-left' : 'fold-right'
			}
		}
	}
</script>

<style lang="less">
	* {
		margin: 0;
		padding: 0;
	}

	input,
	textarea {
		outline: none;
		background-color: transparent;
	}

	.view {
		position: absolute;
		width: 100%;
		height: 100%;
	}



	//底部菜单样式设置
	#app {
		.van-tabbar {
			background-color: #11223A;
		}

		.van-tabbar-item__icon img {
			height: 25px;
		}
	}

	/* 底部菜单动画 */
	.tabbar-fold-enter-active {
		animation-name: tabbar-fold-in;
		animation-duration: .3s;
	}

	.tabbar-fold-leave-active {
		animation-name: tabbar-fold-out;
		animation-duration: .3s;
	}

	@keyframes tabbar-fold-in {
		0% {
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
			/* visibility: visible; */
		}

		100% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes tabbar-fold-out {
		0% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		/*50% {
	      transform: translate3d(-50%, 0 , 0);
	    }*/
		100% {
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
			/* visibility: hidden; */
		}
	}

	.fold-left-enter-active {
		animation-name: fold-left-in;
		animation-duration: .3s;
	}

	.fold-left-leave-active {
		animation-name: fold-left-out;
		animation-duration: .3s;
	}

	@keyframes fold-left-in {
		0% {
			-webkit-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0);
			/* visibility: visible; */
		}

		/*50% {
	      transform: translate3d(50%, 0, 0);
	    }*/
		100% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes fold-left-out {
		0% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		/*50% {
	      transform: translate3d(-50%, 0 , 0);
	    }*/
		100% {
			-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
			/* visibility: hidden; */
		}
	}

	.fold-right-enter-active {
		animation-name: fold-right-in;
		animation-duration: .3s;
	}

	.fold-right-leave-active {
		animation-name: fold-right-out;
		animation-duration: .3s;
	}

	@keyframes fold-right-in {
		0% {
			width: 100%;
			-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
			/* visibility: visible; */
		}

		/*50% {
	      transform: translate3d(50%, 0, 0);
	    }*/
		100% {
			width: 100%;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes fold-right-out {
		0% {
			width: 100%;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		/*50% {
	      transform: translate3d(-50%, 0 , 0);
	    }*/
		100% {
			width: 100%;
			-webkit-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0);
			/* visibility: hidden; */
		}
	}
</style>
